<template>
  <div>
    <div v-if="warning" @mouseover="showTdStyle = true" @mouseleave="showTdStyle = false">
      <a-input-number ref="input1" :precision="precision" :min="min" :disabled="disabled" step="1" class="remind" v-model="myValue" @blur="setValue" @pressEnter="setValue" style="width: 100%"/>
       <div class="td_model" v-if="warning&&showTdStyle">
          <div class="title">校验提示</div>
          <p class="pt10" v-for="(iteam,index) in errMsg" :key="index">{{index+1}}.{{iteam}}</p>
      </div>
   </div>
     <!-- @blur="setValue" @pressEnter="setValue" -->
    <a-input-number ref="input1" :precision="precision" :min="min" v-else :disabled="disabled" step="1" class="notremind" v-model="myValue" @blur="setValue" @pressEnter="setValue" style="width: 100%"/>
  </div>
</template>

<script>
/* eslint-disable */
    export default {
      // name:
      data() {
        return {
          myValue:this.value,
          showTdStyle:false
        }
      },
      methods: {
        isObjEmpty(str){
          if(str == null || str == ""){
            return true;
          }
        },
        setValue(){
          this.$emit('input', this.myValue);
        },
      },
      props:{
        disabled:{// 输入框是否可操作
          type: Boolean,
          default:false,
        },
        precision:{// 精确度
          type:Number,
          default:2,
        },
        errMsg:{// 错误提示信息
          type:Array,
          default:function(){
            return [];
          },
        },
        value:{// 数字框默认值
          type:Number|null,
          default:"0",
        },
        min:{// 最小值
          type:Number,
          default:-9999999,
        }
      },
      computed:{
        warning(){
          if(this.errMsg.length == 0){
            return false;
          }
          return true;
        },
      },
      watch:{
        value(newVal) {
          if(newVal==null){
            newVal = 0;
          }
          this.myValue = Number(newVal.toFixed(this.precision));
          this.$emit('input', this.myValue);
        },
        // myValue(newVal) {
        //   this.$emit('input', newVal)
        // },
      },
    }
</script>

<style scoped>
  .notremind{

  }
  .remind{
    border:2px solid #FF0000;
    border-color: #FF0000;
  }
  >>>.ant-input-number-input{
    text-align:right;
  }
  >>>.ant-input-number-handler-wrap{
    width: 0;
  }
  .td_model{
    position: fixed;
    right: 20px;
    top:20px;
    width: 400px;
    padding: 10px;
    box-shadow:  0 0 15px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    z-index: 999;
    background: #ffffff;
  }
  .td_model .title{
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
  }
  .pt10{
    padding-top: 10px;
  }
</style>
